import Vue from 'vue'
import Vuex from 'vuex'
import { getUserInfoAPI, getUserProfileAPI } from '@/api/userAPI.js'

Vue.use(Vuex)

let initState = {
  // token 的信息对象
  tokenInfo: {},
  // 用户基本信息
  userInfo: {},
  // 用户简介信息
  userProfile: {}
}

// 读取 localStorage 中本地存储的 state 字符串
const stateStr = localStorage.getItem('state')

// 本地存在state转换后赋值给initState
if (stateStr) {
  initState = JSON.parse(stateStr)
}

export default new Vuex.Store({
  state: initState,
  mutations: {
    // 更新 tokenInfo 数据的方法
    updateTokenInfo (state, payload) {
      // 把提交过来的值赋值给tokenInfo
      state.tokenInfo = payload
      // 把用户信息转存到 state 中
      state.userInfo = payload

      this.commit('saveStateToStorage')
    },
    // 将 state 持久化存储到本地
    saveStateToStorage (state) {
      localStorage.setItem('state', JSON.stringify(state))
    },
    // 更新用户信息,  payload 就是请求到的用户信息对象
    updateUserInfo (state, payload) {
      // 把用户信息存到 state
      state.userInfo = payload
      // 将最新的 state 对象存到本地
      this.commit('saveStateToStorage')
    },
    // 清空 vuex 和 本地数据
    clearState (state) {
      // 清空 vuex 的数据
      state.userInfo = {}
      state.tokenInfo = {}
      state.userProfile = {}

      // 将清空后的 state 储存到本地
      this.commit('saveStateToStorage')
    },
    // 更新用户简介信息
    updateUserProfile (state, payload) {
      state.userProfile = payload
      this.commit('saveStateToStorage')
    }
  },
  actions: {
    // 初始化用户基本信息
    async initUserInfo (cxt) {
      // 调用API接口
      const { data: res } = await getUserInfoAPI()
      if (res.message === 'OK') {
        // 把数据转交给 Mutation 方法
        cxt.commit('updateUserInfo', res.data)
      }
    },
    // 初始化用户简介信息
    async initUserProfile (ctx) {
      const { data: res } = await getUserProfileAPI()
      if (res.message === 'OK') {
        ctx.commit('updateUserProfile', res.data)
      }
    }
  },
  getters: {
    // 用户头像计算属性
    userAvatar (state) {
      let imgSrc = 'https://img.yzcdn.cn/vant/cat.jpeg'
      if (state.userInfo.photo) {
        imgSrc = state.userInfo.photo
      }
      return imgSrc
    }
  },
  modules: {}
})
